<template>
  <div class="api-config-page">
    <el-dialog :visible.sync="showApiDialog" title="新增API端点" width="500px">
      <el-form :model="apiForm" label-width="100px">
        <el-form-item label="系统类型">
          <el-select v-model="apiForm.system" placeholder="请选择">
            <el-option label="ERP" value="ERP"/>
            <el-option label="MES" value="MES"/>
          </el-select>
        </el-form-item>
        <el-form-item label="API地址">
          <el-input v-model="apiForm.endpoint" placeholder="请输入API地址"/>
        </el-form-item>
        <el-form-item label="认证方式">
          <el-select v-model="apiForm.authType" placeholder="请选择">
            <el-option label="无" value="none"/>
            <el-option label="Basic Auth" value="basic"/>
            <el-option label="Bearer Token" value="bearer"/>
            <el-option label="API Key" value="apikey"/>
          </el-select>
        </el-form-item>
        <el-form-item label="认证信息" v-if="apiForm.authType !== 'none'">
          <el-input v-model="apiForm.authInfo" placeholder="请输入认证信息"/>
        </el-form-item>
        <el-form-item label="调用频率">
          <el-input v-model="apiForm.frequency" placeholder="如：10/min"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showApiDialog = false">取 消</el-button>
        <el-button type="primary" @click="addApi">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showDbDialog" title="数据库对接" width="500px">
      <el-form :model="dbForm" label-width="100px">
        <el-form-item label="数据库类型">
          <el-select v-model="dbForm.type" placeholder="请选择">
            <el-option label="MySQL" value="mysql"/>
            <el-option label="SQL Server" value="sqlserver"/>
            <el-option label="Oracle" value="oracle"/>
          </el-select>
        </el-form-item>
        <el-form-item label="主机地址">
          <el-input v-model="dbForm.host" placeholder="如：127.0.0.1"/>
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="dbForm.port" placeholder="如：3306"/>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="dbForm.user"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="dbForm.password" type="password"/>
        </el-form-item>
        <el-form-item label="数据库名">
          <el-input v-model="dbForm.database"/>
        </el-form-item>
        <el-form-item label="同步表">
          <el-select v-model="dbForm.tables" multiple placeholder="请选择需同步的表">
            <el-option v-for="t in allTables" :key="t" :label="t" :value="t"/>
          </el-select>
        </el-form-item>
        <el-form-item label="增量同步">
          <el-switch v-model="dbForm.incremental"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDbDialog = false">取 消</el-button>
        <el-button type="primary" @click="addDb">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>API接口配置</span>
        <el-button style="float: right;" type="primary" size="mini" @click="showApiDialog = true">+ 新增</el-button>
      </div>
      <el-table :data="apiList" style="width: 100%">
        <el-table-column prop="system" label="系统类型" width="100"/>
        <el-table-column prop="endpoint" label="API地址"/>
        <el-table-column prop="authType" label="认证方式" width="120"/>
        <el-table-column prop="frequency" label="调用频率" width="120"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeApi(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>数据库对接</span>
        <el-button style="float: right;" type="primary" size="mini" @click="showDbDialog = true">+ 新增</el-button>
      </div>
      <el-table :data="dbList" style="width: 100%">
        <el-table-column prop="type" label="类型" width="100"/>
        <el-table-column prop="host" label="主机"/>
        <el-table-column prop="port" label="端口" width="80"/>
        <el-table-column prop="database" label="数据库"/>
        <el-table-column prop="tables" label="同步表"/>
        <el-table-column prop="incremental" label="增量同步" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.incremental ? 'success' : 'info'">
              {{ scope.row.incremental ? '启用' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeDb(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>同步任务管理</span>
        <el-button style="float: right;" type="primary" size="mini" @click="showTaskDialog = true">+ 新建任务</el-button>
      </div>
      <el-dialog :visible.sync="showTaskDialog" title="新建同步任务" width="500px">
        <el-form :model="taskForm" label-width="100px">
          <el-form-item label="任务名称">
            <el-input v-model="taskForm.name"/>
          </el-form-item>
          <el-form-item label="数据类型">
            <el-select v-model="taskForm.dataType" placeholder="请选择">
              <el-option label="API" value="api"/>
              <el-option label="数据库" value="db"/>
            </el-select>
          </el-form-item>
          <el-form-item label="同步周期">
            <el-input v-model="taskForm.cron" placeholder="如：0/10 * * * * ?"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showTaskDialog = false">取 消</el-button>
          <el-button type="primary" @click="addTask">确 定</el-button>
        </div>
      </el-dialog>
      <el-table :data="taskList" style="width: 100%">
        <el-table-column prop="name" label="任务名称"/>
        <el-table-column prop="dataType" label="数据类型" width="100"/>
        <el-table-column prop="cron" label="同步周期"/>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeTask(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>数据关联映射</span>
      </div>
      <el-table :data="mappingList" style="width: 100%">
        <el-table-column prop="businessField" label="业务字段"/>
        <el-table-column prop="deviceField" label="设备字段"/>
        <el-table-column prop="isPrimaryKey" label="主键" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isPrimaryKey" type="success">是</el-tag>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeMapping(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="mini" style="margin-top: 10px;" @click="showMappingDialog = true">+ 新增映射</el-button>
      <el-dialog :visible.sync="showMappingDialog" title="新增字段映射" width="400px">
        <el-form :model="mappingForm" label-width="100px">
          <el-form-item label="业务字段">
            <el-input v-model="mappingForm.businessField"/>
          </el-form-item>
          <el-form-item label="设备字段">
            <el-input v-model="mappingForm.deviceField"/>
          </el-form-item>
          <el-form-item label="主键">
            <el-switch v-model="mappingForm.isPrimaryKey"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showMappingDialog = false">取 消</el-button>
          <el-button type="primary" @click="addMapping">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>任务监控</span>
      </div>
      <el-table :data="monitorList" style="width: 100%">
        <el-table-column prop="taskName" label="任务名称"/>
        <el-table-column prop="lastSync" label="上次同步"/>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="备注"/>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ApiInterfaceConfiguration',
  data() {
    return {
      // API接口配置
      showApiDialog: false,
      apiForm: {
        system: '',
        endpoint: '',
        authType: '',
        authInfo: '',
        frequency: ''
      },
      apiList: [],
      // 数据库对接
      showDbDialog: false,
      dbForm: {
        type: '',
        host: '',
        port: '',
        user: '',
        password: '',
        database: '',
        tables: [],
        incremental: false
      },
      dbList: [],
      allTables: ['table1', 'table2', 'table3'],
      // 同步任务
      showTaskDialog: false,
      taskForm: {
        name: '',
        dataType: '',
        cron: ''
      },
      taskList: [
        { name: 'bbbb', dataType: 'API', cron: '3/5 * * * * ?', status: '正常' },
        { name: 'adsa', dataType: 'API', cron: '0/10 * * * * ?', status: '禁用' }
      ],
      // 字段映射
      showMappingDialog: false,
      mappingForm: {
        businessField: '',
        deviceField: '',
        isPrimaryKey: false
      },
      mappingList: [
        { businessField: '零件代号', deviceField: 'partCode', isPrimaryKey: true },
        { businessField: '零件名称', deviceField: 'partName', isPrimaryKey: false }
      ],
      // 任务监控
      monitorList: [
        { taskName: 'bbbb', lastSync: '2024-05-01 10:00', status: '成功', message: '同步完成' },
        { taskName: 'adsa', lastSync: '2024-05-01 09:50', status: '失败', message: 'API超时' }
      ]
    }
  },
  methods: {
    // API
    addApi() {
      this.apiList.push({ ...this.apiForm });
      this.showApiDialog = false;
      this.apiForm = { system: '', endpoint: '', authType: '', authInfo: '', frequency: '' };
    },
    removeApi(index) {
      this.apiList.splice(index, 1);
    },
    // DB
    addDb() {
      this.dbList.push({ ...this.dbForm });
      this.showDbDialog = false;
      this.dbForm = { type: '', host: '', port: '', user: '', password: '', database: '', tables: [], incremental: false };
    },
    removeDb(index) {
      this.dbList.splice(index, 1);
    },
    // Task
    addTask() {
      this.taskList.push({ ...this.taskForm, status: '正常' });
      this.showTaskDialog = false;
      this.taskForm = { name: '', dataType: '', cron: '' };
    },
    removeTask(index) {
      this.taskList.splice(index, 1);
    },
    // Mapping
    addMapping() {
      this.mappingList.push({ ...this.mappingForm });
      this.showMappingDialog = false;
      this.mappingForm = { businessField: '', deviceField: '', isPrimaryKey: false };
    },
    removeMapping(index) {
      this.mappingList.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.api-config-page {
  padding: 20px;
}
.section-card {
  margin-bottom: 24px;
}
</style>
